<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="16">
                <el-input v-model="search" @keyup.enter.native="searchTitle" placeholder="请输入标题" clearable></el-input>
            </el-col>
            <el-col :span="8">
                <el-button type="primary" icon="el-icon-search" @click="searchTitle">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" @click="toArticleDetail(0, {id: '000'})">新建笔记</el-button>
            </el-col>
        </el-row>

        <div v-loading="loadingNote"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)">

            <div class="contentList" v-if="dealTitleList.length > 0">
                <div class="row" v-for="(item, index) in dealTitleList" :key="index">
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <div class="title" @click="toArticleDetail(2,item)">{{item.title}}
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <el-button size="small" type="primary" icon="el-icon-edit" circle title="编辑" @click="toArticleDetail(1,item)"></el-button>
                            <el-button size="small" type="danger" icon="el-icon-delete" circle title="删除" @click="delArticle(item)"></el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div v-else style="height: calc(100vh - 248px);text-align: center;line-height: calc(100vh - 248px);">
                暂无数据
            </div>
        </div>

        <!-- 分页 -->
        <div>
            <el-pagination
                class="productParts-paging agreement-page"
                layout="total,sizes,prev, pager, next,jumper"
                :total="total"
                :page-size="pagesize"
                :page-sizes="pagesizes"
                :current-page="currentPage"
                @current-change="current_change"
                @size-change="size_change"
            ></el-pagination>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <p>确定删除笔记: <font style="font-weight: bold;">{{curArticle.title}}</font> ?</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="removeArticle()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { searchAllNote, deleteNote, selectNoteByUserId } from "@/api";

export default {
    name: "index",
    data() {
        return {
            search: '',
            loadingNote: false,
            titleList: [
                // {_id: '001', title: '笔记1'},
                // {_id: '002', title: '笔记2'},
                // {_id: '003', title: '笔记3'},
                // {_id: '004', title: '笔记4'},
                // {_id: '005', title: '笔记5'},
                // {_id: '006', title: '笔记6'},
                // {_id: '007', title: '笔记7'},
                // {_id: '007', title: '笔记7'},
                // {_id: '007', title: '笔记7'},
                // {_id: '007', title: '笔记7'},
            ],
            dealTitleList: [],
            status: 0, // 0：新建， 1：编辑， 2： 只读
            dialogVisible: false,
            curArticle: {
                title: ''
            },
            // 分页
            currentPage: 1, // 默认开始页面
            total: 0, // 默认数据总数
            page:1,
            pagesize: 15, // 每页的数据条数,template 中:page-size="pagesize"  表示所有的数据按每页显示的数量生个具体多少个页码按钮
            pagesizes: [10,20,30, 40, 50], // 每页要显示的数据条数
            pageNum:10,
        }
    },
    methods: {
        index(index) {
            return (this.currentPage - 1) * this.pagesize + index + 1;
        },
        // 条目改变时
        current_change(currentPage) {
            this.pageNum  = currentPage;
            this.loadAllNote();
        },
        // 改变时
        size_change(pagesizes) {
            // alert(pagesizes)
            this.pagesize = pagesizes;
            this.loadAllNote();
        },

        // 【调接口】加载所有笔记
        loadAllNote() {
            this.loadingNote = true;
            this.titleList = [];
            // 查看所有笔记
            // searchAllNote().then((res) => {
            //     console.log(res);
            //     if(res.data.code ===200){
            //         this.$message.success("加载成功！")
            //         this.titleList = res.data.data;
            //         this.dealTitleList = [...this.titleList];
            //     }
            // });
            let user = window.sessionStorage.getItem('user');
            let dealUser = JSON.parse(user);

            let param = {
                page: this.page,
                pageNum: this.pageNum,
                info_id: dealUser._id,
            };
            // 查询某个用户的笔记(分页)
            selectNoteByUserId(param).then((res) => {
                this.loadingNote = false;
                if(res.data.code ===200){
                    this.$message.success("加载成功！")
                    this.titleList = res.data.data.note;
                    this.total = res.data.data.total;
                    this.currentPage = this.pageNum;
                    this.dealTitleList = [...this.titleList];
                }
            })
        },
        // 查询笔记
        searchTitle() {
            this.dealTitleList = [];
            //console.log(this.search);
            // debugger;
            if(this.search == '') {
                this.loadAllNote();
            } else {
                this.dealTitleList = this.titleList.filter(x => x.title.includes(this.search)== true);
            }
        },
        // 新建/查看/编辑  文章详情
        toArticleDetail(status, article) {
            const newPage = this.$router.resolve({ path: '/articleDetail', query: { status, articleId: article._id }})
            // debugger
            window.open(newPage.href,'_blank')
        },
        // 删除笔记
        delArticle(item) {
            this.dialogVisible = true;
            this.curArticle = item;
        },
        // 【调接口】删除笔记
        removeArticle() {
            //console.log(this.curArticle)
            deleteNote(this.curArticle._id).then((res) => {
                if(res.data.code ===200){
                    this.$message.success("删除成功！")
                    this.loadAllNote();
                }
            });
            this.dialogVisible = false
        },
        handleClose() {
            this.dialogVisible = false
        }
    },
    mounted() {
        this.searchTitle();
    }
}
</script>

<style lang="scss" scoped>
.contentList{
    height: calc(100vh - 248px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10px 0px 10px 0px;
}
.row{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    border-bottom: 1px solid #b3aeae;
    margin: 8px;
    .title{
        cursor: pointer;
        padding-left: 10px;
        border-radius: 6px;
    }
    .title:hover{
        background-color: #00c4ff59;
        color: white;
    }
}
.page {
    float: right;
    margin: 10px;
}
::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
    background: center center no-repeat transparent;
}
::v-deep .el-pagination button:disabled{
    background-color: transparent;
}
::v-deep .el-pager li{
    background-color: transparent !important;
}
::v-deep .btn-prev{
    background: center center no-repeat transparent;
}

.agreement-page{
    text-align: center;
}
</style>